<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		canvas{
			display:block;
			margin:100px 20px;
			border:1px solid red;
		}
	</style>
	<body>
		<canvas width="400" height="400"></canvas>
	   <script>
		   // var cas=document.querySeletor("canvas")
		   var cas=document.querySelector("canvas")
		   console.log(cas)
		   var ctx=cas.getContext("2d")
		   // consoe.log(cxt)
		    var x =100;
			var y=100;
			var r=30;
			// drawCircle(x,y,r)
			var xSped=3
			var ySped=9
			setInterval(function(){
				ctx.clearRect(0,0,400,400)
				if(x+r>=400||x-r<=0){
					xSped=-xSped
				}
				x=x+xSped
				if(y+r>=400||y-r<=0){
					ySped=-ySped 
					console.log(ySped)
				}
				y=y+ySped
				drawCircle(x,y,r)				
				// console.log(11)
				
			},10)
			function drawCircle(x,y,r){
				ctx.beginPath()
			ctx.arc(x,y,r,0,Math.PI*2,)
            // cxt.stroke()
			ctx.fillStyle="gold"
			ctx.fill()
			}
			
	   </script>
	</body>
	
	
</html>
